<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>地址:{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button>查看联系方式</button>
  </div>
</template>
  <script setup lang='ts'>
import { ref, reactive } from "vue";
const name = ref("我是谁");
const age = ref(28);
const address = ref("安徽-合肥");

const changeName = () => {
  name.value = "修改名字";
};
const changeAge = () => {
  age.value = 128;
};
</script>
  <style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>